<template>
  <div class="home">
    <div class="block">
      <el-carousel trigger="click" type="card" height="340px" autoplay="autoplay" ref="car">
        <el-carousel-item v-for="item in list" :key="item.id">
          <div class="car">
            <el-image :src="item.img" class="image" alt="" @click="link(item.id)"></el-image>
            <div class="small" @click="link(item.id)">
              <div class="car-text">
                {{item.name}}
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>

      <div class="title">
        <div class="left">
          <div class="inner">
            <i class="el-icon-chat-line-round"></i>
              网站公告
          </div>
        </div>
        <div class="right">
          <el-link class="link" href="https://element.eleme.io" target="primary">
            网站开启！！！！！！
          </el-link>
        </div>
      </div>

      <el-row :gutter="20">
        <el-col :span="8">
          <div class="card">
            <el-card class="box-card" :body-style="{backgroundColor: '#fafafa' }">
              <div slot="header" class="box-head">
                <a class="c-text">▎防诈知识</a>
                <el-button class="more" type="text" @click="cardclick(1)">
                  更多
                  <i class="el-icon-d-arrow-right"></i>
                </el-button>
              </div>
              <el-table class="c-tab" :data="this.knowledge" :show-header="false" @row-click="handleK" max-height="250">
                <el-table-column prop="title" width="240" show-overflow-tooltip></el-table-column>
                <el-table-column prop="time" width="100" :formatter="dateForma"></el-table-column>
              </el-table>
            </el-card>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="card">
            <el-card class="box-card" :body-style="{backgroundColor: '#fafafa' }">
              <div slot="header" class="box-head">
                <span class="c-text">▎真实案例</span>
                <el-button class="more" type="text" @click="cardclick(2)">
                  更多
                  <i class="el-icon-d-arrow-right"></i>
                </el-button>
              </div>
              <el-table class="c-tab" :data="this.case" :show-header="false" @row-click="handleC" max-height="250">
                <el-table-column prop="title" width="240" show-overflow-tooltip></el-table-column>
                <el-table-column prop="time" width="100" :formatter="dateForma"></el-table-column>
              </el-table>
            </el-card>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="card">
            <el-card class="box-card" :body-style="{backgroundColor: '#fafafa' }">
              <div slot="header" class="box-head">
                <a class="c-text">▎用户分享</a>
                <el-button class="more" type="text" @click="cardclick(3)">
                  更多
                  <i class="el-icon-d-arrow-right"></i>
                </el-button>
              </div>
              <el-table class="c-tab" :data="this.share" :show-header="false" @row-click="handleS" max-height="250">
                <el-table-column prop="title" width="240" show-overflow-tooltip></el-table-column>
                <el-table-column prop="time" width="100" :formatter="dateForma"></el-table-column>
              </el-table>
            </el-card>
          </div>
        </el-col>
      </el-row>
      <div style="height: 100px"></div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import moment from "moment";

export default {
  data : function() {
    return {
      id: '0',
      list: [
        {id: 0, img: require('../assets/loop/loop1.jpg'), name: "公安部公布十大高发电信网络诈骗类型"},
        {id: 1, img: require('../assets/loop/loop2.jpg'), name: "【情景游戏】你能逃离诈骗圈套吗？"},
        {id: 2, img: require('../assets/loop/loop3.jpg'), name: "网络违法犯罪举报网站"},
        {id: 3, img: require('../assets/loop/loop4.jpg'), name: "全民反诈防骗季主题曲来啦"},
      ],
      knowledge: [],
      case: [],
      share: [],
    }
  },
  mounted() {
    this.load();
  },
  methods: {
    link(id) {
      if(id === this.id) {
        if(id === 0) {
          axios.get("api/article/info/id", {
            params: {
              id: 21,
            }
          }).then((res) => {
            if (res.data.code === '0') {
              sessionStorage.setItem("knowledge", JSON.stringify(res.data.data))
              this.$router.push("/article/knowledge/kdetails")
            } else {
              this.$message({
                showClose: true,
                type: "error",
                message: "文章信息获取失败！",
              })
            }
          })
        }
        else if(id === 1) {
          this.$router.push("/learn/scenechoose")
        }
        else if(id === 2) {
          window.open("https://cyberpolice.mps.gov.cn/#/", '_blank')
        }
        else if(id === 3) {
          axios.get("api/article/info/id", {
            params: {
              id: 30,
            }
          }).then((res) => {
            if (res.data.code === '0') {
              sessionStorage.setItem("share", JSON.stringify(res.data.data))
              this.$router.push("/article/share/sdetails")
            } else {
              this.$message({
                showClose: true,
                type: "error",
                message: "文章信息获取失败！",
              })
            }
          })
        }
      }
      else {
        this.$refs.car.setActiveItem(id)
        this.id = id
      }
    },
    cardclick(id){
      if(id === 1) {
        this.$router.push("/article/knowledge")
      }
      else if(id === 2){
        this.$router.push("/article/case")
      }
      else {
        this.$router.push("/article/share")
      }
    },
    dateForma: function(row,column){
      var date = row[column.property];
      if(date === undefined){return ''};
      return moment(date).format("YYYY-MM-DD")
    },
    handleK(row) {
      console.log(row)
      sessionStorage.setItem("knowledge", JSON.stringify(row))
      this.$router.push("/article/knowledge/kdetails")
    },
    handleC(row) {
      sessionStorage.setItem("case", JSON.stringify(row))
      this.$router.push("/article/case/cdetails")
    },
    handleS(row) {
      sessionStorage.setItem("share", JSON.stringify(row))
      this.$router.push("/article/share/sdetails")
    },
    load(){
      this.fullscreenLoading = true;
      axios.get("api/article/info/page", {
        params:{
          type: 1,
          size: 5,
        }}).then((res) => {
        if (res.data.code === '0') {
          this.knowledge = res.data.data.records
        } else {
          this.$message({
            showClose: true,
            type: "error",
            message: "文章信息获取失败！",
          })
        }
      })

      axios.get("api/article/info/page", {
        params:{
          type: 2,
          size: 5,
        }}).then((res) => {
        if (res.data.code === '0') {
          this.case = res.data.data.records
        } else {
          this.$message({
            showClose: true,
            type: "error",
            message: "文章信息获取失败！",
          })
        }
      })

      axios.get("api/article/info/page", {
        params:{
          type: 3,
          size: 5,
        }}).then((res) => {
        if (res.data.code === '0') {
          this.share = res.data.data.records
        } else {
          this.$message({
            showClose: true,
            type: "error",
            message: "文章信息获取失败！",
          })
        }
      })
      this.fullscreenLoading = false;
    }
  }
}

</script>

<style scoped>
.home{
  width: 100%;
  min-height: 666px;
  display: flex;
}

.block{
  width: 80%;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0%);
}

.car {
  padding-top: 20px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}

.small{
  position: absolute;
  width: 100%;
  left: 50%;
  top: 83%;
  transform: translate(-50%, 0%);
  height: 60px;
  background: linear-gradient(transparent 0%, #354e66 100%);
}

.car-text {
  padding-top: 30px;
  width: 605px;
  font-size: 20px;
  color: #f9bf4b;
}

.title{
  background: #fafafa;
  border-radius: 5px;
  margin-top: 10px;
  height: 40px;
  overflow: hidden;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}

.left {
  background: #354e66;
  border-radius: 2px;
  float: left;
  line-height: 30px;
  margin-left: -20px;
  padding: 7px 0;
  transform: skewX(20deg);
 }

.inner {
  padding-left: 40px;
  padding-right: 20px;
  transform: skewX(-20deg);
  color: #f9bf4b;
  font-size: 17px;
  font-weight: bold;
}

.right {
  height: 30px;
  position: absolute;
  padding-top: 11px;
  left: 150px;
}

.link {
  font-size: 16px;
}

.el-row {
  padding-top: 20px;
}

.el-col {
  border-radius: 40px;
}

.box-card{
  background-color: #354e66;
}

.c-tab {
  width: 100%;
  background: #fafafa;
}

/deep/ .el-table th, /deep/ .el-table tr, /deep/ .el-table td {
   background-color: transparent;
 }

/deep/.el-table__body-wrapper::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}

.c-text {
  font-size: 17px;
  color: #f9bf4b;
  font-weight: bold;
  float: left;
}

/deep/ .el-card__header {
  height: 60px;
}

.more {
  font-size: 17px;
  float: right;
  font-weight: bold;
  padding: 3px 0;
}

</style>